<script setup>
import { ref, onMounted } from 'vue'
import Info from './info.vue'
import { getPage, delBatch,del,getTjList } from '@/api/rule'
import * as echarts from 'echarts'

// 表单状态
const filterState = ref(true)
// 表单数据
const isExpand = ref(false)

const formData = ref({
  pageNum: 1,
  pageSize: 10,
  belongsMonth:'',
  empName:'',
  affiliatedUnit:'',//测试单位
})
const dates = ref([])
const tableData = ref({})
const loadData = async () => {
  const r = await getTjList(formData.value)
  tableData.value = r.data
}
const ClearloadData = async () => {
  formData.value.belongsMonth='',
  formData.value.empName='',
  formData.value.affiliatedUnit=''
  const r = await getTjList(formData.value)
  tableData.value = r.data
}
//页面渲染之后就执行
onMounted(() => {
  loadData()
})
// 修改
const infoRef = ref()
const onEdit = (row) => {
  infoRef.value.state = true
  if (row) {
    infoRef.value.formData.id = row.id
    infoRef.value.formData.name = row.name
    infoRef.value.formData.type = row.type
    infoRef.value.formData.comment = row.comment
    infoRef.value.formData.status = row.status
    infoRef.value.formData.effTime = row.effTime
    infoRef.value.formData.workUpTime = row.workUpTime
    infoRef.value.formData.workDownTime = row.workDownTime
    infoRef.value.formData.clockStartTime = row.clockStartTime
    infoRef.value.formData.clockPeriod = JSON.parse(row.clockPeriod)
    infoRef.value.formData.flexTime = row.flexTime
  }
}

// // 用户删除
// const onDelete = (ids) => {
//   ElMessageBox.confirm('确定删除数据吗?', '温馨提示', {
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning'
//   })
//     .then(async () => {
//       //请求接口 删除数据
//       let r = await delBatch({ ids })
//       if (r.code == 0) {
//         ElMessage({ type: 'success', message: '删除成功' })
//         loadData()
//       } else {
//         ElMessage({ type: 'info', message: r.data })
//       }
//     })
//     .catch(() => {
//       ElMessage({ type: 'info', message: '用户取消' })
//     })
// }
// 用户删除
const onDelete = (row) => {
  ElMessageBox.confirm('确定删除这条数据吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      //请求接口删除数据
      let r = await del([row.id ])
      console.log(r);
      if (r.code == 200) {
        ElMessage({ type: 'success', message: '删除成功' })
        loadData()
      } else {
        ElMessage({ type: 'info', message: r.data })
      }
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '用户取消' })
    })
}
// 批量选择
let ids = ref([])
const onSelectionChange = (val) => {
  let selectIds = []
  val.forEach((item) => {
    if (selectIds.indexOf(item.id) == -1) selectIds.push(item.id)
  })
  ids.value = selectIds
}
//------------------------------
const chart1 = ref()
const chart2 = ref()
const posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight'
];
app.configParameters = {
  rotate: {
    min: -90,
    max: 90
  },
  align: {
    options: {
      left: 'left',
      center: 'center',
      right: 'right'
    }
  },
  verticalAlign: {
    options: {
      top: 'top',
      middle: 'middle',
      bottom: 'bottom'
    }
  },
  position: {
    options: posList.reduce(function (map, pos) {
      map[pos] = pos;
      return map;
    }, {})
  },
  distance: {
    min: 0,
    max: 100
  }
};
app.config = {
  rotate: 90,
  align: 'left',
  verticalAlign: 'middle',
  position: 'insideBottom',
  distance: 15,
  onChange: function () {
    const labelOption = {
      rotate: app.config.rotate,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      position: app.config.position,
      distance: app.config.distance
    };
    myChart.setOption({
      series: [
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        }
      ]
    });
  }
};
const labelOption = {
  show: true,
  position: app.config.position,
  distance: app.config.distance,
  align: app.config.align,
  verticalAlign: app.config.verticalAlign,
  rotate: app.config.rotate,
  formatter: '{c}  {name|{a}}',
  fontSize: 16,
  rich: {
    name: {}
  }
};
const renderChart1=()=>{
  chart1.value.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['补卡', '事假', '年休']
    },
    // toolbox: {
    //   show: true,
    //   orient: 'vertical',
    //   left: 'right',
    //   top: 'center',
    //   feature: {
    //     mark: { show: true },
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: ['北京','山西', '山东', '河南', '河北']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '补卡',
        type: 'bar',
        barGap: 0,
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [2, 2, 0, 0, 0]
      },
      {
        name: '事假',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [8, 5, 0, 0, 3]
      },
      {
        name: '年休',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [5, 6, 0, 0, 2]
      },

    ]
  })
}
const renderChart2=()=>{
  chart2.value.setOption({
    title: {
      text: '各单位年度打卡情况统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 8, name: '北京' },
          { value: 5, name: '山西' },
          { value: 0, name: '山东' },
          { value: 0, name: '河南' },
          { value: 3, name: '河北' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
}
onMounted(()=>{
  chart1.value=echarts.init(document.getElementById('main1'))
  chart2.value=echarts.init(document.getElementById('main2'))
  renderChart1()
  renderChart2()
})
</script>
<template>
  <Box>
    <!-- 逻辑层 -->
    <Info ref="infoRef" @flush="loadData" />
    <!-- 逻辑层 -->
    <!-- 筛选 -->
    <template #filter v-if="filterState">
      <el-form :inline="true" :model="formData">
        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model="formData.empName" />
        </el-form-item>
        <el-form-item label="人员编码">
          <el-input placeholder="请输入人员编码" v-model="formData.workCode" />
        </el-form-item>
        <el-form-item label="单位">
          <el-input placeholder="请输入单位" v-model="formData.affiliatedUnit" />
        </el-form-item>
        <el-form-item label="查找月份">
          <!-- <el-date-picker
        v-model="formData.belongsMonth"
        value-format="YYYY-MM"
        type="date"
        placeholder="选择时间"
        :size="size"
      /> -->
      <el-date-picker
      v-model="formData.belongsMonth"
          type="month"
          value-format="YYYY-MM"
          placeholder="选择时间"
        />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">
            <span class="iconfont icon-sousuo"></span>搜索
          </el-button>
          <el-button type="default" @click="ClearloadData"> 重置 </el-button>
          <el-button type="primary" link @click="isExpand = !isExpand">
            {{ isExpand ? '收起' : '展开' }}
            <el-icon>
              <ArrowUp v-if="isExpand" />
              <ArrowDown v-else />
            </el-icon>
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <!-- 筛选 -->
    <!-- 内容 -->
    <!-- 按钮组 -->
    <!-- <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="onEdit">
          <span class="iconfont icon-jiahao"></span>添加
        </el-button>
        <el-button type="danger" :disabled="!ids.length" @click="onDelete(ids)">
          <span class="iconfont icon-shanchu"></span>删除
        </el-button>
      </el-col>

      <el-col :span="12" style="text-align: right">
        <el-button circle @click="filterState = !filterState">
          <span class="iconfont icon-sousuo"></span>
        </el-button>
        <el-button circle>
          <span class="iconfont icon-shuaxin"></span>
        </el-button>
      </el-col>
    </el-row> -->
    <!-- 按钮组 -->
<!--    echarts-->
    <div style='display: flex;flex-direction: row;height: 300px'>
      <div id='main1' style='width:100%;height: 360px'>1</div>
      <div id='main2' style='width:100%;height: 360px'>2</div>
    </div>








<!--    echarts-->
    <!-- 表格 -->
    <el-table :data="tableData.list" :border="true">
      <el-table-column label="序号" align="center">
        <template #default="scope">
          <span>{{ (formData.pageNum - 1) * formData.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="人员姓名" prop="empName" align="center" />
      <el-table-column label="人员编码" prop="workCode" align="center" />
      <el-table-column label="人员单位" prop="affiliatedUnit" align="center" />
      <el-table-column label="打卡正常次数" prop="normalTimes" align="center" />
      <el-table-column label="打卡异常次数" prop="abnormalTimes" align="center" />
      <!-- <el-table-column label="操作" align="center" width="120" fixed="right">
        <template #default="scoped">
          <el-button type="primary" link size="small" @click="onEdit(scoped.row)">
            <span class="iconfont icon-bianji"></span>查看打卡详情
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 表格 -->

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="formData.pageNum"
      v-model:page-size="formData.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="loadData"
      @current-change="loadData"
    />
    <!-- 分页 -->
    <!-- 内容 -->
  </Box>
</template>
